<template>
    <div class="maptoolbar-container">
        <!-- <div class="maptoolbar-menu-item" @click="select(0)"
            :class="{ 'maptoolbar-menu-item-confirm': selectIndex === 0 ? true : false }">
            图层
        </div> -->
        <div class="maptoolbar-menu-item" @click="select(1)"
            :class="{ 'maptoolbar-menu-item-confirm': selectIndex === 1 ? true : false }">
            图例</div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selectIndex: -1,
        };
    },
    watch: {

    },
    methods: {
        select(index) {
            if (this.selectIndex === index) {
                if (index === 0) {
                    // 关闭图层控制工具
                    // todo

                } else if (index === 1) {
                    // 关闭图例
                    this.transData({
                        component: 'mapToolBar',
                        event: 'legend',
                        visible: false
                    })
                }

                this.selectIndex = -1;
                return;
            }
            this.selectIndex = index;

            this.transData({
                component: 'mapToolBar',
                event: 'legend',
                visible: false
            })
            
            if (index === 0) {
                // 开启图层控制工具
                // todo

            } else if (index === 1) {
                // 开启图例
                this.transData({
                    component: 'mapToolBar',
                    event: 'legend',
                    visible: true
                })
            }
        },
        transData(data) {
            this.$emit('mapToolBarEvent', data);
        },
    },
    computed: {

    },
};
</script>

<style lang="scss" scoped>
.maptoolbar-container {
    position: absolute;
    width: 30px;
    border: 1px solid rgb(255, 255, 255);
    overflow: hidden;
    border-radius: 5px;
    right: 15px;
    top: 20px;
    z-index: 4;
    box-shadow: 0 0 0 2px #0000001a;
    font-size: 10px;

    .maptoolbar-menu-item {
        width: 28px;
        height: 28px;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }

    .maptoolbar-menu-item:hover,
    .maptoolbar-menu-item-confirm {
        background-color: #4F46E5;
        color: white;
    }

    .maptoolbar-menu-item:not(:first-child) {
        border-top: 1px solid rgb(139, 136, 136, 0.3);
    }
}
</style>